<template>
  <!--工作台表格文件查看组件-->
  <div class="techDoc_panel">
    <el-dialog
      title="技术文件"
      width="85%"
      :visible.sync="dialogTableVisible"
      v-dialogDrag
      :close-on-click-modal="false"
      @closed="closedDialog"
      customClass="mes_dialog">
      <el-tabs v-model="tabsValue" type="border-card" v-loading="isloading" class="mes_tabs">
        <el-tab-pane label="工艺文件" name="first">
          <work-stage-tech-file :techProcList="techProcList"  :title="'加工工艺说明'" :noFile="'暂无文件'"></work-stage-tech-file>
        </el-tab-pane>
        <el-tab-pane label="图纸" name="second">
          <work-stage-tech-file :techProcList="[]" :title="'制造图纸'" :noFile="'暂无图纸'"></work-stage-tech-file>
        </el-tab-pane>
        <el-tab-pane label="工序上料清单" name="third">
          <div class="table_panel table_container tab_pane">
            <el-table
              :data="workorderWorkstageMaterialList"
              border
              height="440"
              style="width: 100%; margin-top: 20px">
              <el-table-column
                align="center"
                prop="sort"
                label="工序序号"
                width="180">
              </el-table-column>
              <el-table-column
                prop="workstageName"
                label="工序名称">
              </el-table-column>
              <el-table-column
                align="center"
                prop="workorderTecProcNumber"
                label="工艺规程编号">
              </el-table-column>
              <el-table-column
                align="center"
                prop="drawingNumber"
                label="图号">
              </el-table-column>
              <el-table-column
                align="center"
                prop="materialNumber"
                label="物料编码">
              </el-table-column>
              <el-table-column
                prop="materialName"
                label="物料名称">
              </el-table-column>
              <el-table-column
                align="center"
                prop="materialTypeLabel"
                label="物料类型">
              </el-table-column>
              <el-table-column
                align="center"
                prop="quantity"
                label="数量">
              </el-table-column>
              <el-table-column
                prop="remarks"
                :resizable="false"
                label="备注">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="工装明细" name="four">
          <div class="table_panel table_container tab_pane">
            <el-table
              :data="workorderWorkstageResourceList"
              border
              height="440"
              style="width: 100%; margin-top: 20px">
              <el-table-column
                align="center"
                prop="sort"
                label="工序序号"
                width="180">
              </el-table-column>
              <el-table-column
                prop="workstageName"
                label="工序名称">
              </el-table-column>
              <el-table-column
                align="center"
                prop="resourceNumber"
                label="资源编号">
              </el-table-column>
              <el-table-column
                prop="resourceName"
                label="资源名称">
              </el-table-column>
              <el-table-column
                align="center"
                prop="resourceTypeLabel"
                label="资源类型">
              </el-table-column>
              <el-table-column
                align="center"
                prop="workorderTecProcNumber"
                label="工艺规程编号">
              </el-table-column>
              <el-table-column
                prop="quantity"
                align="center"
                label="数量">
              </el-table-column>
              <el-table-column
                prop="remarks"
                :resizable="false"
                label="备注">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="设备文件" name="five">
          <work-stage-tech-file :techProcList="uploadDeviceFileHistorie" :title="'设备文件'" :noFile="'暂无文件'"></work-stage-tech-file>
        </el-tab-pane>
        <el-tab-pane label="其他文件" name="six" class="other_tab_panel">
          <div class="multiple_search">
            <div class="search_item">
              <div class="select_label">
                文档类型：
              </div>
              <div class="search_wrapper">
                <el-select
                  v-model="fileType"
                  multiple
                  collapse-tags
                  placeholder="请选择文档类型"
                  size="small">
                  <el-option
                    v-for="(item,index) in fileTypeList"
                    :key="index"
                    :label="item.label"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="search_item">
              <div class="select_label">
                文件名称：
              </div>
              <div class="search_wrapper">
                <el-input
                  v-model="fileName"
                  clearable
                  size="small"
                  placeholder="请输入文件名称">
                </el-input>
              </div>
            </div>
            <div class="mes_btn">
              <el-button
                type="primary"
                icon="el-icon-search"
                class="search_btn"
                @click="filterSearchFile">
              </el-button>
            </div>
          </div>
          <work-stage-tech-file :techProcList="otherFileList" :title="'其他文件'" :noFile="'暂无文件'"></work-stage-tech-file>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import WorkStageTechFile from '@/components/WorkStageTechFile/WorkStageTechFile'
export default {
  name: 'technicalDocuments',
  components: {
    WorkStageTechFile
  },
  data() {
    return {
      dialogTableVisible: false, // dialog开启、关闭状态
      tabsValue: 'first', // tabs组件value值
      isloading: false, // 数据是否在加载
      todayMillisecond: new Date().getTime(), // 当前时间戳
      fileType: [], // 搜索文件类型
      fileName: '', // 搜索文件名称
      otherFileList: [], // 其他文件
    }
  },
  computed: {
    // 总数据
    listData() {
      return this.$store.state.workshopBench.fileData || {}
    },
    // 文档类型
    fileTypeList() {
      return this.$store.state.dict.FileType.labels || []
    },
    // 物料清单
    workorderWorkstageMaterialList() {
      return this.listData.workstageMateria || []
    },
    // 资源清单
    workorderWorkstageResourceList() {
      return this.listData.workstageResource || []
    },
    // 工艺清单
    techProcList() {
      return this.listData.techProc || []
    },
    // 设备文件
    uploadDeviceFileHistorie() {
      return this.listData.uploadDeviceFileHistorie || []
    },
    // 其他文件
    otherFile() {
      return this.listData.otherFile || []
    }
  },
  methods: {
    /**
     * dialog弹窗开启
     * @param id 工单ID
     */
    openDialog(row) {
      this.dialogTableVisible = true
      this.isloading = true
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/turnoverworkstage/turnoverWorkstage/viewTechnologyFile',
        data: {turnoverWorkstageId: row.id, workorderId: row.workorderId},
        module: 'workshopBench',
        state: 'fileData'
      }).then((res) => {
        this.filterSearchFile()
      }).finally(() => {
        this.isloading = false
      })
    },
    /**
     * 查询文件
     */
    filterSearchFile() {
      if (this.otherFile.length) {
        if (this.fileType.length) {
          this.otherFileList = this.otherFile.filter((item) => {
            return item.fileName.indexOf(this.fileName) > -1 && this.fileType.indexOf(item.fileTypeId) > -1
          })
        } else {
          this.otherFileList = this.otherFile.filter((item) => {
            return item.fileName.indexOf(this.fileName) > -1
          })
        }
      }
    },
    // 关闭dialog后重置tabs默认页码
    closedDialog() {
      this.tabsValue = 'first'
    },
    /**
     * 错误提示
     * @param str 提示内容
     */
    errorMessage(str) {
      this.$message({
        type: 'error',
        message: str,
        duration: 1500,
        center: true
      })
    }
  }
}
</script>

<style lang="less">
  .techDoc_panel {
    .el-dialog__body {
      padding: 0!important;
      .el-tabs--border-card {
        border: none;
        box-shadow: none;
        padding: 20px;
        .el-tabs__nav-scroll {
          border: @mesBorDefault;
          border-bottom: none;
          border-top: none;
          border-right: none;
          .el-tabs__item {
            color: @mesTabsItemBgC !important;
            font-size: 14px;
            border-top: @mesBorDefault;
            border-right: @mesBorDefault;
            margin-top: 0;
          }
          .el-tabs__item.is-active {
            color: #333 !important;
            position: relative;
            &::after {
              position: absolute;
              left: 0;
              top: 0;
              display: block;
              content: '';
              width: calc(100% + 1px);
              height: 2px;
              background-color: @mesTabsItemActiveC;
              margin-top: -1px;
            }
          }
        }
        .el-tabs__content {
          padding: 20px 0 0 0;
        }
      }
    }
    .tab_pane {
      height: 440px;
    }
    .el-tab-pane{
      height: 441px;
      padding-bottom: 2px;
    }
    .table_panel {
      padding: 0 !important;
      .el-tabs__header {
        margin-bottom: 0;
      }
      .el-table--border {
        margin: 0 !important;
        .el-table-column--selection .cell {
          padding: 0;
        }
      }
      .el-table__body td {
        padding: 0;
        .cell {
          white-space: nowrap;
          line-height: 40px;
          padding: 0 10px;
          .icon-td_date {
            font-weight: 600;
            padding-left: 10px;
          }
        }
        .el-input__inner {
          outline: none;
          border: none !important;
          background-color: transparent;
          padding-right: 14px !important;
          text-overflow: ellipsis;
        }
        .el-input__prefix {
          left: -6px;
        }
        .type_list {
          width: 100%;
          .el-input__inner {
            padding-left: 0;
          }
        }
      }
    }
    /*日期*/
    .plane_time {
      .el-input__icon {
        color: @mesTableDateIconC;
        font-weight: 600;
      }
    }
    .form_panel {
      padding-top: 20px;
    }
    .multiple_search{
      padding-top: 0!important;
      padding-left: 0!important;
    }
    .other_tab_panel{
      .file_list.tab_pane{
        height: 388px!important;
      }
    }
  }
</style>
